<template>
	<view>
		<view style="height: 88upx;"></view>
		<view class="dh">
			<u-icon name="arrow-left" color="#000000" size="28"   @click="fh()"></u-icon>
			<view class="dh1">酒店</view>
		</view>
	      
		<view class="t1">
			<view class="t2">
				<view class="t3">3月18日今天</view>
				<view class="t4">-</view>
				<view class="t5">3月19日 明天</view>
				<view class="t6">|</view>
				<view class="t7">共1晚</view>
			</view>
			<view class="t8">
				<view class="t9">轻奢小床房</view>
				<view class="t10">|</view>
				<view class="t11">1张1.8米大床</view>
				<view class="t12">|</view>
				<view class="t13">无早餐</view>
			</view>
		</view>
		<view style="background: #F6F6F6;height: 80vh;">
			<view style="height: 20upx;"></view>
			<view v-if="show==true">
				<view class="t14">
					<view class="t15">
						<view class="t16">
							<view>订单信息</view>
							<view>1间</view>
						</view>
						<view class="t17">
							<view class="t18">入住人</view>
							<u--input placeholder="请输入入住人姓名"   border="none"  clearable  ></u--input>
							<!-- <view class="t19">请输入入住人姓名</view> -->
						</view>
						<view class="t17">
							<view class="t18" style="margin-right: 100upx;">+86</view>
							<u--input placeholder="请填写您本人的联系电话"   border="none"  clearable  ></u--input>
						</view>
						<view class="t17">
							<view class="t18" style="margin-right: 50upx;">预计到店</view>
							<view class="t19">14:00<u-icon name="arrow-down" color="#999999" size="16"></u-icon></view>
						</view>
					</view>
					
				</view>
				<view class="t20" >
					<view>已同意并《《***协议》》</view>
				</view>
				<view class="t21">
					<view class="t22">在线付</view>
					<view class="t23">￥0</view>
					<view class="t24" @click="show=false">提交审核</view>
				</view>
			</view>
			
			
			
			<view v-if="show==false">
				<view class="t14" style="height: 430upx;">
					<view class="t15">
						<view class="t16">
							<view>订单信息</view>
							<view>1间</view>
						</view>
						<view class="t17">
							<view class="t18">房间1</view>
							<u--input placeholder="每间仅需填1人，可住2人"   border="none"  clearable  ></u--input>
							<!-- <view class="t19">请输入入住人姓名</view> -->
						</view>
						<view class="t17">
							<view class="t18">房间2</view>
							<u--input placeholder="每间仅需填1人，姓名不可重复"   border="none"  clearable  ></u--input>
						</view>
						<view class="t17">
							<view class="t18" style="margin-right: 100upx;">+86</view>
							<u--input placeholder="请填写手机号"   border="none"  clearable  ></u--input>
						</view>
						<view class="t17">
							<view class="t18" style="margin-right: 50upx;">预计到店</view>
							<view class="t19">14:00<u-icon name="arrow-down" color="#999999" size="16"></u-icon></view>
						</view>
					</view>
					
				</view>
				<view class="t25">
					<view class="t26">
						<view class="t27">积分</view>
						<view class="t28">-￥1.2</view>
						<view class="t29"><u-icon name="arrow-right" color="#969799" size="18"></u-icon></view>
					</view>
					<view class="t26" style="margin-top: 36upx;">
						<view class="t27">会员抵扣</view>
						<view class="t28" style="margin-left: 48upx;">-￥10.0</view>
					</view>
					<view class="t26" style="margin-top: 44upx;">
						<view class="t27">优惠券</view>
						<view class="t28" style="margin-left: 76upx;">-￥10.0</view>
						<view class="t30"><u-icon name="arrow-right" color="#969799" size="18"></u-icon></view>
					</view>
				</view>
				
				<view class="t31">
					<view class="t32">扣款说明</view>
					<view class="t33">入住日18:00前可免费取消，取消后1个工作日内款项退回</view>
				</view>
				<view class="t21">
					<view class="t22">在线付</view>
					<view class="t23">￥229</view>
					<view class="t24" style="margin-left: 150upx;" @click="tz()">微信支付</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>

	export default {
		
		data() {
			return {
				show:true
			}
		},
		watch:{
			
		},
		onLoad() {
			
		},
		
		
		methods:{
			fh(){
				uni.navigateBack({
					delta:1
				})
			},
			tz(){
				uni.navigateTo({
					url:'/pages/hotel/orderdetails'
				})
			},
			 radioChange: function(e) {
			    console.log('radio发生change事件，携带value值为：', e.detail.value)//e.detail.value就是每次选择后得出来的值
			  },
		 rightClick() {
		            console.log('rightClick');
		        },
		        leftClick() {
		            console.log('leftClick');
		        }
		}
	}
</script>

<style lang="scss" scoped>	
	.dh{
		height: 88upx;
		margin-left: 34upx;
		display: flex;
		align-items: center;
		.dh1{
			font-size: 34upx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			margin-left: 250upx;
		}
	}
	.t1{
		.t2{
			display: flex;
			padding-left: 32upx;
			margin-top: 20upx;
			.t3{
				font-size: 28upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.t4{
				font-size: 28upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				margin-left: 20upx;
				margin-right: 20upx;
				
				
			}
			.t5{
				font-size: 28upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.t6{
				color: #DDDDDD;
				margin-left: 22upx;
				margin-right: 20upx;
			}
		}
		.t8{
			display: flex;
			padding-left: 32upx;
			margin-top: 20upx;
			padding-bottom: 20upx;
			.t9{
				font-size: 28upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.t10{
				color: #DDDDDD;
				margin-left: 22upx;
				margin-right: 20upx;
			}
			.t11{
				font-size: 28upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.t12{
				margin-left: 22upx;
				margin-right: 20upx;
				color: #DDDDDD;
			}
			.t13{
				font-size: 28upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}
	}
	.t14{
		width: 100%;
		height: 330upx;
		background: #FFFFFF;
		.t15{
			margin-left: 32upx;
			padding-top: 28upx;
			padding-right: 52upx;
			.t16{
				display: flex;
				justify-content: space-between;
				view{
					font-size: 28upx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
			}
			.t17{
				display: flex;
				align-items: center;
				margin-top: 40upx;
				.t18{
					font-size: 28upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin-right: 76upx;
				}
				.t19{
					font-size: 26upx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					display: flex;
					align-items: center;
				}
			}
		}
	}
	.t20{
		view{
			font-size: 26upx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-top: 40upx;
			margin-left: 32upx;
		}
	}
	.t21{
		display: flex;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 122upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 12upx 2upx rgba(0,0,0,0.1608);
		.t22{
			font-size: 32upx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			margin-top: 46upx;
			margin-left: 32upx;
		}
		.t23{
			font-size: 36upx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #DF5353;
			margin-left: 20upx;
			margin-top: 44upx;
		}
		.t24{
			width: 333upx;
			height: 80upx;
			background: #84C0F4;
			font-size: 32upx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80upx;
			margin-left: 196upx;
			margin-top: 22upx;
			border-radius: 20upx;
		}
	}
	.t25{
		width: 100%;
		height: 240upx;
		background: #FFFFFF;
		margin-top: 20upx;
		padding-top: 50upx;
		.t26{
			display: flex;
			align-items: center;
			padding-left: 32upx;
			
			.t27{
				font-size: 28upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.t28{
				font-size: 26upx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				margin-left: 104upx;
			}
			.t29{
				margin-left: 422upx;
			}
			.t30{
				margin-left: 410upx;
			}
		}
	}
	.t31{
		margin-top: 38upx;
		margin-left: 32upx;
		.t32{
			font-size: 28upx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #666666;
		}
		.t33{
			font-size: 24upx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			margin-top: 20upx;
		}
	}
</style>
